<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定详解</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        [v-clock]{
            display: none;
        }
        .c1{
            color: brown;
            font-size: 20px;
            height: 30px;
        }
        .p1style{
            width: 100px;
            height: 200px;
            background-color: brown;
            border: 3px solid coral;
        }
        .span1{
            background-color: brown;
        }
        .span3{
            background-color: blue;

        }
    </style>
</head>
<body>
<div id="app" >
    <fieldset>
        <legend>
            <h2>值绑定</h2>
        </legend>
<!--        {{}}其中括号中是vue的编译环境-->
        <p v-cloak>msg的值是{{msg}}</p>
        <p>A+B的值是{{a+b}}</p>
        <p>a>b是:{{a>b?"真的":"假的"}}</p>
<!--        注意双引号里面也是vue的编译环境-->
        <p v-html="'诗人是'+avalue"></p>
        <p v-html='bvalue'></p>
        <p v-text="bvalue"></p>
        <p v-html="'a>b是:'+(a>b?'真的':'假的')"></p>
    </fieldset>
    <fieldset>
        <legend>
            <h2>属性绑定</h2>
        </legend>
        <img alt=""  v-bind:src="imgsrc">
        <img :src="imgsrc" alt="">
        <a :href="imgsrc">图片</a>
<div :style="style"></div>
        <div :style="divstyle2"></div>
        <div :style="divstyle3"></div>
        <hr/>
<p :class="p1s">你好呀佩奇</p>
        <p :class="p2s"></p>
        <p :class="{p1style: true}"></p>
        <p :class="{p1style: isAdd}"></p>
        <p :class="{span1: str=='优惠'}">选择优惠100元</p>
        <p :class="{span1: str=='一折'}">选择打一折</p>
        <p :class="{span3: true}">jsfshhsakjs</p>
    </fieldset>
    <fieldset>
        <legend>
            <h2>事件绑定</h2>
        </legend>
        <button v-on:click="button1">无参数</button>
        <button v-on:click="button2(666,msg,'哈哈哈')">有参数</button>
        <button @mousedown="button3">按钮3</button>
        <button v-on:click="button4(10,$event)">按钮4,有小括号获取事件对象</button>
    </fieldset>
</div>
</body>
</html>
<script>
let app=new Vue({
    el:"#app",
    data:{
        msg:"   今天不会才星期一吧",
        a:1,
        name:"狗子",
        b:666,
        avalue:"温庭筠",
        bvalue:"这是一个a标签:<a href='http://www.baidu.com'>百度一下</a>",
        imgsrc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1160141523,2362541442&fm=26&gp=0.jpg",
        style:{
            width:"100%",
            height:"200px",
            backgroundColor:"red",
        },
        divstyle2:[ {width:"100%"},
            {height:"200px"},
            {backgroundColor:"yellow"},],
        divstyle3:'width:100%;height:200px; backgroundColor:blue;',
        p1s:"c1",

        p2s:{
            p1style:false,
        },
        isAdd:false,
        str:"优惠",
    },
//    事件对应的触发函数要写在methods字段
    methods:{
        button1(){
            if(this.str=="一折"){
                this.str="优惠"
            }else { this.str="一折"};
            // alert("按钮一被点击了")
        },
        button2:function(a,b,c){
            console.log(a,b,c);
        },
        button3(e){
            console.log(e);
        },
        button4(a,b){
            console.log(a);
            console.log(b);
        }
    }
});

</script>